﻿<UserControl x:Class="ControlsSample.Samples.CrossButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:apexControls="clr-namespace:Apex.Controls;assembly=Apex"
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">

    <Grid Style="{StaticResource GalleryItemStyle}">

        <apexControls:PaddedGrid Rows="Auto,Auto,*,Auto" Padding="4">

            <!-- Title section. -->
            <TextBlock Grid.Row="0" Style="{StaticResource Heading1}">CROSSBUTTON</TextBlock>
            <TextBlock Grid.Row="1" Style="{StaticResource Subtitle}">Often it is useful to offer the facility to close or delete an element. The 
            Cross Button gives you a clean and simple control to do this.</TextBlock>

            <!-- Sample zone. -->
            <Grid Row="2" Margin="16" MaxWidth="400" MaxHeight="300">

                <apexControls:PaddedGrid Rows="Auto,Auto,Auto,Auto" Columns="*,2*" VerticalAlignment="Center" Padding="12">

                    <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="Simple example" />
                    <apexControls:CrossButton Grid.Row="0" Grid.Column="1" Width="12" Height="12" />

                    <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Text="Larger example" />
                    <apexControls:CrossButton Grid.Row="1" Grid.Column="1" Width="16" Height="16" />

                    <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Text="Custom Brushes" />
                    <apexControls:CrossButton Grid.Row="2" Grid.Column="1" Width="12" Height="12" 
                                          NormalBackgroundBrush="#0000FF" NormalCrossBrush="#9999FF"
                                          HoverBackgroundBrush="#6565FF" HoverCrossBrush="#FFFFFF" />

                </apexControls:PaddedGrid>

            </Grid>
        </apexControls:PaddedGrid>

    </Grid>
</UserControl>
